<template>
    <div class="uploadDiv">
        <input class="file" type="file" id="files" ref="refFile" @click="e => {e.target.value = '';} "
               v-on:change="importCsv"/>
        <el-button class="btn" size="small"><span style="cursor: pointer">点击上传<i
                class="el-icon-upload el-icon--right"></i
        ></span></el-button>
        <el-dialog
                v-model="dialogVisible"
                title="上传结果"
                width="60%"
                :before-close="handleClose"
        >
                <div  v-loading="fullscreenLoading" element-loading-svg-view-box="-10, -10, 50, 50" element-loading-text="Loading...">
                    <div style="width: 100%;text-align: right"><span style="color: green;margin-right: 10px" v-if="csvList.success">成功条数：{{csvList.success}}</span><span
                            style="color:red;" v-if="csvList.errors">失败条数：{{csvList.errors.length}}</span></div>
                    <el-table

                            v-if="csvList.errors"
                            :data="csvList.errors"
                            :default-sort="{ prop: 'date', order: 'descending' }"
                            style="width: 100%"
                    >
                        <el-table-column prop="line" label="错误行" sortable width="180"/>
                        <el-table-column prop="error" label="错误信息" width="auto"/>
                    </el-table>
                </div>
            <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
        >确认</el-button>
      </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import Papa from 'papaparse'
    import {updateUserPool} from "../../request/api"

    export default {
        data() {
            return {
                csvList: [],
                dialogVisible: false,
                fullscreenLoading:false
            }
        },
        methods: {
            handleClose() {
                this.dialogVisible = false
            },
            importCsv() {
                let selectedFile = null
                selectedFile = this.$refs.refFile.files[0];
                if (selectedFile === undefined) {
                    return
                }
                console.log('selectedFile', selectedFile)
                const data = new FormData();
                data.append('csv_file', selectedFile)
                this.dialogVisible = true;
                this.fullscreenLoading = true
                updateUserPool(data).then(res => {
                    this.fullscreenLoading = false
                    this.csvList = res;
                    this.$emit('loading');
                }).catch(err => {
                    this.fullscreenLoading = false
                    this.$message({type: 'error', message: err.msg + '，' + err.errors})
                })
            },
        }
    }
</script>

<style>
    .uploadDiv .el-dialog__body {
        height: 50vh;
        overflow: auto;
    }
</style>

<style scoped>
    .uploadDiv {
        margin-right: 20px;
        display: inline-block;
        width: 75px;
        height: 28px;
        position: relative;
        margin-left: 10px;
    }

    .file {
        width: 98px;
        height: 25px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 0;
    }

    .btn {
        cursor: pointer;
    }
</style>
